<template>
  <view class="tabList  paddLR" :class="type">
    <view v-for="item in list" :key="item.id" class="item" :class="{on: tabId === item.id}" @click="chooseTabId(item)">
      <text class="name">{{item.name}}{{tabId}}</text></view>
  </view>
</template>

<script>
  export default {
    name: 'zb-tabs',
    props: {
      //类型，到不同的页面
      list: {
        type: Array,
        default: []
      },
      id: {
        type: [Number, String],
        default: 0
      },
      type: {
        type: String,
        default: 'flex-lect'
      }
    },
    data() {
      return {
        tabId: this.id
      };
    },
    methods: {
      chooseTabId(item) {
        this.tabId = item.id;
        this.$emit('ok', item.id)
      },
    },
    watch: {
      id: {
        immediate: true,
        handler(e) {
          
          console.log('e === ', e);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tabList {
    border-bottom: 1px solid #ededed;
    padding: 36rpx 0 10rpx;
    margin-bottom: 30rpx;

    &.flex-bect {
      border-bottom: none;

      .item {
        margin-right: 0;
      }
    }

    .item {
      position: relative;
      padding: 16rpx 0;
      margin-right: 95rpx;

      .name {
        position: relative;
        z-index: 5;
        font-size: 30rpx;
        line-height: 1;
      }

      &::before {
        content: '';
        display: none;
        width: 60%;
        height: 16rpx;
        background: linear-gradient(0deg, #ffc466 0%, #ff6060 100%), #fafafa;
        border-radius: 8rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        bottom: 16rpx;
      }

      &.on {
        font-weight: bold;

        &::before {
          display: block;
        }
      }
    }
  }
</style>